<!-- 控件的使用 -->
<template>
  <div>
    <div style="" ref="map" id="mapDiv"></div>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
const map = ref(null);
const menu = ref(null);

// 初始化地图
function initMap() {
  map.value = new T.Map("mapDiv");
  map.value.centerAndZoom(new T.LngLat(116.40769, 39.89945), 12);

  /**
   * 1、创建右键菜单
   */
  menu.value = new T.ContextMenu({ width: 200, }); // 菜单宽度

  /**
   * 3.1、配置注册方法(方式一)
   */
  // menu.value.addItem(new T.MenuItem("放大", zoomIn)); // 添加方法
  // menu.value.addItem(new T.MenuItem("缩小", zoomOut));
  // menu.value.addSeparator(); // 添加分割线
  // menu.value.addItem(new T.MenuItem("自定义方法", foo));

  /**
   * 3.2 通过配置项配置菜单(方式二)
   */
  const txtMenuItem = reactive([
    { text: "放大", callback: () => { map.value.zoomIn(); }, },
    { text: "缩小", callback: () => { map.value.zoomOut(); }, },
    { text: "自定义", callback: () => { console.log(1111); }, },
    {
      text: "当前地图中心点坐标", callback: () => {
        console.log(map.value.getCenter().getLng());
        console.log(map.value.getCenter().getLat());
      },
    },
  ]);
  for (let i = 0; i < txtMenuItem.length; i++) {
    menu.value.addItem(new T.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback)),
      menu.value.addSeparator()
  }
  /**
   * 4、添加至地图
   */
  map.value.addContextMenu(menu.value);
}

onMounted(() => {
  initMap()
});

// 2、添加缩放控件
function zoomIn(e) {
  // 放大
}
function zoomOut(lnglat) {
  // 缩小
  map.value.zoomOut();
}
function foo() {
  console.log(1111);
}
</script>
<style>
#mapDiv {
  width: 800px;
  height: 500px;
  margin: 0 auto;
}
</style>
